2. 程式人生 > >Javascript:通用不間斷滾動&省、市、地區聯動選擇JS封裝類

Javascript:通用不間斷滾動&省、市、地區聯動選擇JS封裝類

阿新 • • 發佈：2018-12-26
通用不間斷滾動JS封裝類&省、市、地區聯動選擇JS封裝類 
官方主頁: http://www.popub.net/script/MSClass.html
一 環境:XP+Myeclipse6.5+Tomcat7 
二 簡單示例:詳見工程附件 
1 文字上下滾動 
Js程式碼  收藏程式碼
  1. <style type="text/css">  
  2.         body,div{margin:0;font-size:12px}  
  3.         td.data{font-size: 12px;line-height: 20px;color: #666}        
  4.         #context{
      
  5.                 width: 500px;  
  6.                 height: 300px;        
  7.                 margin-top:10%;  
  8.                 margin-left:30%;          
  9.                 font-size:13px;   
  10.                 color:#003c79;  
  11.                 background:#f4f5f9;   
  12.                 border:solid 1px #d0d6e9;  
  13.         }         
  14.     </style>  
  15.     <script type="text/javascript" src="scripts/MSClass.js" charset="gb2312"></script>  
  16.     <script type="text/javascript" charset="gbk">  
  17.           window.onload = function(){  
  18.            new Marquee("context",-1,1,600,400,50,5000,1000,290);  
  19.         }  
  20.     </script>  


Html程式碼  收藏程式碼
  1. <div id="context">  
  2.          <table>  
  3.             <tr>  
  4.                 <td class="data">  
  5.                 <p>       
  6. ...  
  7. </p>  
  8.         </td>  
  9.        </tr>       
  10.       </table>  
  11.       </div>  


2 箭頭控制滾動方向、加速及滑鼠拖動例項 

Html程式碼  收藏程式碼
  1. <table border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff">  
  2. <td><a href="javascript:void(0);" id="LeftButton2" hidefocus><img src="images/right.gif"  border="0"></a></td>  
  3. <td width="10"></td>  
  4. <td valign="top" width="477">  
  5.     <div ID="MarqueeDiv2" style="width:477px;overflow:hidden;">  
  6.         <TABLE style="WIDTH:800px; BORDER-COLLAPSE: collapse;display:inline;" cellSpacing=0 cellPadding=0 align=center border=0>  
  7.         <TBODY>  
  8.         <TR>  
  9.             <TD width="160" align="center" height="145">  
  10.                 <A href="javascript:void(0)"><IMG src="images/1.jpg" border=0 width="150" height="120"></A><br/>  
  11.                 <A href="javascript:void(0)">連結1</A>   
  12.             </TD>  
  13.             <TD width="160" align="center">  
  14.                 <A href="javascript:void(0)"><IMG src="images/2.jpg" border=0 width="150" height="120"></A><br/>  
  15.                 <A href="javascript:void(0)">連結2</A>   
  16.             </TD>  
  17.             <TD width="160" align="center">  
  18.                 <A href="javascript:void(0)"><IMG src="images/3.jpg" border=0 width="150" height="120"></A><br/>  
  19.                 <A href="javascript:void(0)">連結3</A>   
  20.             </TD>  
  21.             <TD width="160" align="center">  
  22.                 <A href="javascript:void(0)"><IMG src="images/4.jpg" border=0 width="150" height="120"></A><br/>  
  23.                 <A href="javascript:void(0)">連結4</A>   
  24.             </TD>  
  25.             <TD width="160" align="center">  
  26.                 <A href="javascript:void(0)"><IMG src="images/5.jpg" border=0 width="150" height="120"></A><br/>  
  27.                 <A href="javascript:void(0)">連結5</A>   
  28.             </TD>  
  29.             <TD width="160" align="center">  
  30.                 <A href="javascript:void(0)"><IMG src="images/6.jpg" border=0 width="150" height="120"></A><br/>  
  31.                 <A href="javascript:void(0)">連結6</A>   
  32.             </TD>  
  33.             <TD width="160" align="center">  
  34.                 <A href="javascript:void(0)"><IMG src="images/7.jpg" border=0 width="150" height="120"></A><br/>  
  35.                 <A href="javascript:void(0)">連結7</A>   
  36.             </TD>  
  37.             <TD width="160" align="center">  
  38.                 <A href="javascript:void(0)"><IMG src="images/8.jpg" border=0 width="150" height="120"></A><br/>  
  39.                 <A href="javascript:void(0)">連結8</A>   
  40.             </TD>  
  41.         </TR>  
  42.         </TBODY>  
  43.         </TABLE>  
  44.     </div>  
  45. </td>  
  46. <td width="10"></td>  
  47. <td><a href="javascript:void(0);" id="RightButton2" hidefocus><img src="images/left.gif" border="0"></a></td></tr>  
  48. </table>  


Js程式碼  收藏程式碼
  1. <script defer>  
  2. function $(id){return document.getElementById(id)};  
  3. /*********箭頭控制滾動方向、加速及滑鼠拖動***************/  
  4. var MarqueeDiv2Control=new Marquee("MarqueeDiv2");  //箭頭控制滾動方向、加速及滑鼠拖動例項  
  5. MarqueeDiv2Control.Direction="left";  
  6. MarqueeDiv2Control.Step=1;  
  7. MarqueeDiv2Control.Width=477;  
  8. MarqueeDiv2Control.Height=145;  
  9. MarqueeDiv2Control.Timer=20;  
  10. MarqueeDiv2Control.ScrollStep=1;//若為-1則禁止滑鼠控制例項  
  11. MarqueeDiv2Control.Start();  
  12. $("LeftButton2").onmouseover=function(){MarqueeDiv2Control.Direction=2};  
  13. $("LeftButton2").onmouseout=$("LeftButton2").onmouseup=function(){MarqueeDiv2Control.Step=MarqueeDiv2Control.BakStep};  
  14. $("LeftButton2").onmousedown=$("RightButton2").onmousedown=function(){MarqueeDiv2Control.Step=MarqueeDiv2Control.BakStep+3};  
  15. $("RightButton2").onmouseover=function(){MarqueeDiv2Control.Direction=3};  
  16. $("RightButton2").onmouseout=$("RightButton2").onmouseup=function(){MarqueeDiv2Control.Step=MarqueeDiv2Control.BakStep};  
  17. </script>  


3 省、市、地區聯動選擇 

< Js程式碼  收藏程式碼
  1. style type="text/css">  
  2.         a,body,select{font-size:12px;text-decoration:none;}  
  3.         a,pre{color:#808080;}  
  4.         body{background:#efefef;}  
  5.     </style>  
  6. <script type="text/javascript" src="scripts/PCASClass.js" charset="gb2312"></script>      


Html程式碼  收藏程式碼
  1. <fieldset style="padding:5px;">  
  2. <legend>省市聯動</legend>  

  3. 相關推薦

    Javascript:通用不間斷滾動&省、市、地區聯動選擇JS封裝類

    通用不間斷滾動JS封裝類&省、市、地區聯動選擇JS封裝類 官方主頁: http://www.popub.net/script/MSClass.html一 環境:XP+Myeclipse6.5+Tomcat7 二 簡單示例:詳見工程附件 1 文字上下滾動  Js程式

    DIV+CSS圖片不間斷滾動jquery特效(Marquee插件)及移動標簽marquee整理

    初始化 net text div hidden jquery unicode char ini 推薦一個jQuery的無縫文字滾動效果，同時也可以滾動圖片，也叫做跑馬燈效果。 此jquery插件，依托jquery庫，能實現各種滾動效果，且讓HTML代碼符合W3C標準。

    ajax（省、市、編碼聯動）

    har append city ack 取數據 dex val 執行 set <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

    獲取省、市、區的js程式碼控制

    $(function() { // 初始化省市區 initAddress(); // 更改省份後的操作 $("select[name='province']").change(function() { var provCode = $("select

    Java中獲取資料庫中的資料，獲取下拉列表中的資料， 獲取省、市、區的資料，根據上一層去控制下一層

    $(function() { //validateRule(); getDept(); $("select[name='deptNamee']").change(function() { var deptCode = $("select[name='deptN

    微信小程式 - 獲取所在位置(省、市、區)

        實現步驟 1. 獲取當前經緯度   2. 呼叫騰訊(百度、高德)地圖對應的請求地址，一般都會有獨一的key, 譬如   騰訊地圖呼叫地址： https://apis.map.qq.com/ws/geocoder/v1/?l

    JQuery：省、市、區三級級聯

     主要功能：實現省市區三級聯動（選擇省之後，然後可以選擇相應的市，最後可以選擇相應的區） 主要技術：JQuery，js ，html 主要程式碼： <!DOCTYPE html> <html> <head> <meta charse

    收貨地址（省、市、縣）三級資料

    2017年統計(截止2017年10月31日) [{     "name": "北京市",     "code": 1,     "children": [{         "name": "市轄區",         "code": 257,         "child

    省、市、區三級地址編碼之間的關係

    註釋：如果現資料表只有一個area_id（包括省id、市id、區id）和 area_type標誌地區級別（一級、二級、三級）           要分別匹配出省id、市id、區id 關係：example：省：內蒙古自治區   對應：area_id   15 0000  

    java 從字串中提取省、市、區、鎮、鄉等區域名稱（包含少數民族地區）

    近期寫的一個專案，需要從IOS和Android傳來的一個字串提取省、市、區等區域名稱，於是就整理了一個工具類，程式碼如下： import java.util.ArrayList; import java.util.LinkedHashMap; import java.u

    js實現省、市、區的三級聯動

    如何實現省市區的三級聯動呢？ 　　這裡，我是將省市區的相關資訊都是以json 格式儲存的，用的時候一定要搞清楚陣列和物件的相關處理。 　　先來看看json格式儲存的資訊，這裡提供下省市區的資訊截圖，內容太多，不好上傳：.js檔案（area-json.js） 　　　　 　　首先先建立是三個空的selec

    ssm框架下總行、省、市、分行級聯

    1.html程式碼： <form> <div class="form-group"> <label for="recipient-name" class="contr

    JS+JQuery實現前端省、市、區三級聯動（外掛）

    大家在做web開發的時候，肯定會在前端程式碼裡面遇到選擇省市區（縣）的功能，比如建立使用者、編輯使用者時，使用者選擇所在地等。好了多餘的話不多說了，我們進入正題吧！ 首先，在前端頁面裡面編寫HTML程式碼：<div id="city"> <select

    用正則表示式切割詳細地址中的省、市、區（例如：address=陝西省延安市寶塔區寶塔山街道寶塔山景區,切割之後為province=陝西省, city=延安市, county=寶塔區寶塔山街道寶塔山景）

    將詳細地址切割為省市區工具類（還要切割到鎮、村莊參考博文：https://blog.csdn.net/superSubfn/article/details/80290491） package com.camelot.attendance.util; import java.util.Arr

    marquee製作連續不間斷滾動圖片效果

    先了解一下物件的幾個的屬性：innerHTML:     設定或獲取位於物件起始和結束標籤內的 HTMLscrollHeight: 獲取物件的滾動高度。scrollLeft:    設定或獲取位於物件左邊界和視窗中目前可見內容的最左端之間的距離scrollTop:     設定或獲取位於物件最頂端和視窗中可見

    Python獲取全國所有的省、市、縣、鎮、村

    #!/usr/bin/python3 # -*- coding: utf-8 -*- # author=He """ 通過國家統計局資料 獲取中國所有城市列表 """ import sys import os import re from urllib imp

    JavaScript自定義瀏覽器滾動條相容IE、 火狐和chrome

    今天為大家分享一下我自己製作的瀏覽器滾動條，我們知道用css來自定義滾動條也是挺好的方式，css雖然能夠改變chrome瀏覽器的滾動條樣式可以自定義，css也能夠改變IE瀏覽器滾動條的顏色。但是css只能是改變IE瀏覽器的顏色，而且CSS不能做到改變火狐瀏覽器的樣式和顏色。

    使用jquery.cityselect插件選擇省，市，區聯動

    sele 目錄 info 會員 基於 htm js插件 jquery pro 選擇省、市、區聯動在web中應用十分廣泛，在商城，會員管理系統等都非常常見 cityselect.js插件是基於jQuery之上的地區選擇插件，使用JSON獲取城市數據，深入研究可以讀源碼 下載地

    國家以及省-市-區三級聯動的js陣列

    基於layui的省市區三級聯動 html <div class="layui-form-item"> <label class="layui-form-label"><span class

    JavaScript-----對聯廣告--拉動滾動條,圖片位置固定不變

    <!DOCTYPE html> <html> <head lang="en">     <meta charset="UTF-8">     <title></title>