网站常用效果插件库

所属分类:UI,媒体-对话框和灯箱,幻灯片和轮播图

 21114  324  查看评论 (6)
网站常用效果插件库 ie兼容6
页面meta设置

HTML使用方法:

是否启用Ie6提示:<meta name="ie6Prompts" content="true" />
是否禁用鼠标右键:<meta name="rightMouseButton" content="true" />
是否启用返回顶部按钮:<meta name="toTop" content="true" />
是否启用版权信息:<meta name="Copyright" content="true" />
是否启用双击滚屏:<meta name="DClickScrolling" content="true" />
是否启用网站变灰:<meta name="GrayPage" content="true" />
是否开启网站维护中提示灰:<meta name="Egis" content="true" />
截取字符串


HTML使用方法:

<img dsh="limit" num="10" ></li> 

JS使用方法

$('div,p,li,span...').limit('8'); 
等比例缩放图片


HTML使用方法:
<p dsh="imgAuto" width="80" height="100" > <img src="..."></li> </p> 
JS使用方法

$('img,div img,p img,li img,span img...').imgAuto(80,100); 
获取系统时间


HTML使用方法:

<div dsh="time" wel="欢迎光临,今天是:">正在加载...</div>
 <input type="text" dsh="time" value="正在加载..."> 

JS使用方法

div等元素:setInterval(function(){$('div]').eq(i).GetTime('欢迎光临,今天是:','1');},1000);
文本框:setInterval(function(){$('input').GetTime('','1','input')},1000); 
Tab菜单切换


HTML使用方法:

<div dsh="tab" event="click">
     <div switchtab>
         <a tab>a</a>
         <a tab>b</a>
         <a tab>c</a>
     </div>
     <div switchblock>
         <p block>a</p>
         <p block>b</p>
         <p block>c</p>
     </div>
 </div>


JS使用方法

$('div').tab('切换菜单标签','菜单选中样式','被切换标签容器','被切换标签','事件:click/hover'); 
设为首页加入收藏


HTML使用方法:

<div dsh="sc"></div> 

JS使用方法

$('img,div img,p img,li img,span img...').tool('设为首页','间隔内容','加入收藏'); 
文章列表格行换色


HTML使用方法:

<ul dsh="icc">
 <li listtag>演示文字:从前有坐山,山有有坐庙,庙里有个插件。</li>
 <li listtag>演示文字:从前有坐山,山有有坐庙,庙里有个插件。</li>
 <li listtag>演示文字:从前有坐山,山有有坐庙,庙里有个插件。</li>
 <li listtag>演示文字:从前有坐山,山有有坐庙,庙里有个插件。</li>
 <li listtag>演示文字:从前有坐山,山有有坐庙,庙里有个插件。</li>
 </ul>
 <style>
 .icc li.focusstyle{ background:#0CF;}
 .icc li.basestyle{ background:#FF9;}
 .icc li.evenstyle{ background:#CF9;}
 </style>


JS使用方法

$('img,div img,p img,li img,span img...').arlist('列表项标记','焦点行样式','偶数行样式','基数行样式'); 
创建在线QQ


HTML使用方法:

<em dsh="qq" qq="1594125370,1"></em>
 <em dsh="qq" qq="1594125370,2"></em>
 <em dsh="qq" qq="1594125370,3"></em>
 <em dsh="qq" qq="1594125370,4"></em>
 <em dsh="qq" qq="1594125370,5"></em>
 <em dsh="qq" qq="1594125370,6"></em>


JS使用方法

$('div,p,li,span...').qq('QQ号','样式编号(1-17,41-50)'); 
关闭浏览器窗口


HTML使用方法:

<a dsh="closewindow">关闭窗口</a> 

JS使用方法

$('div,p,li,span...').click(function(){$.colsewindow()}); 
获取URL中的参数值


JS使用方法

RequestQueryString['i']; 
左右无缝滚动


HTML使用方法:

<div dsh="roll">
 <img src="Images/test.jpg" width="60" />
 <img src="Images/test.jpg" width="60" />
 <img src="Images/test.jpg" width="60" />
 <img src="Images/test.jpg" width="60" />
 </div>


JS使用方法

$('div,p,li,span...').roll(); 
滚屏效果上下(带控制)


HTML使用方法:

<div dsh="rollTop" line="4" speed="200" timer="3000">
 <div btnt>上上上</div>
 <div roll style="height:100px; overflow:hidden;">
 <ul>
 <li>从前有坐山,山有有坐庙,庙里有个插件。</li>
 ...
 </ul>
 </div>
 <div btnb>下下下</div>
 </div>


JS使用方法

$('div,p,li,span...').rollTop({line:滚动行数,speed:速度,timer:时间间隔,up:"上按钮",down:"下按钮"});
 $('div,p,li,span...').rollTop({line:滚动行数,speed:速度,timer:时间间隔}); 
滚屏效果(滚屏效果左右(带控制))


HTML使用方法:

<div dsh="rollLeft" RollRow="滚动列数" DisplayRow="显示列数" SwitchBigImg="大图切换(*[bigImgObj])不需要(false)" Title="大图切换标题(*[bigtitle])不需要(false)" Time="自动滚动间隔时间为0则不自动滚动">
 <!--注意:SwitchBigImg和Title属性为大图元素和大图标题元素,如果不需要大图切换将其值写为false-->
 <div class="bigimg">
 <img bigImgObj width="300" height="200">//不需要时直接去掉即可
<p bigtitle>标题</p>//不需要时直接去掉即可
</div>
 <div class="list">
     <div class="bn bnl" btnl>左</div>
     <div class="bn bnr" btnr>右</div>
     <div class="roll" roll>
     <ul>
     <li title="标题一"><img src="Images/TestImg/01.jpg" bigSrc="Images/TestImg/01.jpg">标题一</li>
     <li title="标题二"><img src="Images/TestImg/02.jpg" bigSrc="Images/TestImg/02.jpg">标题二</li>
     <li title="标题三"><img src="Images/TestImg/03.jpg" bigSrc="Images/TestImg/03.jpg">标题三</li>
     <li title="标题四"><img src="Images/TestImg/04.jpg" bigSrc="Images/TestImg/04.jpg">标题四</li>
     <li title="标题五"><img src="Images/TestImg/05.jpg" bigSrc="Images/TestImg/05.jpg">标题五</li>
     <li title="标题六"><img src="Images/TestImg/06.jpg" bigSrc="Images/TestImg/06.jpg">标题六</li>
     </ul>
     </div>
 </div>
 </div>


JS使用方法

$('滚动层').rollLeft({RollRow:滚动列数,DisplayRow:显示列数,Left:'左按钮',Right:'右按钮',Time:自动滚动间隔时间为0则不自动滚动,SwitchBigImg:'切换的大图对象',Title:'切换的标题对象'}); 
简易提示层


JS使用方法

$.topPrompt(宽,高,'提示内容'); 
插入flash


HTML使用方法:

<img src="..." dsh="imgAuto" maxWidth="80" ></li> 

JS使用方法

$('div,p,li,span...').flash({src:'路径',width:'宽度',height:'高度',wmode:'显示模式(transparent)',mask:是否开启遮罩(true/flase)}); 
操作Cookie


JS使用方法

写入:$.cookie('name','content');
读取:$.cookie('name'); 
智能浮动层


HTML使用方法:

<div dsh="smartFloat">往上滚动,看我会怎样。</div> 

JS使用方法

$('div,p,li,span...').smartFloat(); 
页面滚动图片等元素动态加载


HTML使用方法:

<img class="scrollLoading" data-url="图片真实地址" src="1*1gif图片" /> 

JS使用方法

$('div,p,li,span...').scrollLoading(); 
事件的延时处理


JS使用方法

$('div,p,li,span...').hoverDelay({
 hoverDuring:500,//鼠标移上延时设置
outDuring: 500,//鼠标移出延时设置
hoverEvent: function(){
 alert("鼠标移上时执行的事件!");
 }
outEvent: function(){
 alert("鼠标移出时执行的事件!");
 }
 });
联级选择


HTML使用方法:

内容格式:
<div dsh="CasSelect">
 <a class="p0" id="13" pid="0"><input type="checkbox" name="sel" value="13" />一级</a>
     <a class="p1" id="14" pid="13"><input type="checkbox" name="sel" value="14" />二级</a>
         <a class="p2" id="32" pid="14"><input type="checkbox" name="sel" value="32" />三级</a>
             <a class="p3" id="33" pid="32"><input type="checkbox" name="sel" value="33" />四级</a>
                 <a class="p4" id="34" pid="33"><input type="checkbox" name="sel" value="34" />五级</a>
                     <a class="p5" id="35" pid="34"><input type="checkbox" name="sel" value="35" />六级</a>
     <a class="p1" id="27" pid="13"><input type="checkbox" name="sel" value="27" />二级</a>
         <a class="p2" id="36" pid="27"><input type="checkbox" name="sel" value="36" />三级</a>
     <a class="p1" id="28" pid="13"><input type="checkbox" name="sel" value="28" />二级</a>
 </div> 

JS使用方法

$('div,p,li,span...').CasSelect(); 
input提示输入内容


HTML使用方法:

<input type="text" default="这里写下些什么好呢!"> 
焦点图


HTML使用方法:

<div class="preview">
     <div dsh="fs" style="width:300px;height:150px;">
     <ul>
     <li><img src="Images/TestImg/01.jpg"></li>
     <li><img src="Images/TestImg/02.jpg"></li>
     <li><img src="Images/TestImg/03.jpg"></li>
     <li><img src="Images/TestImg/04.jpg"></li>
     <li><img src="Images/TestImg/05.jpg"></li>
     <li><img src="Images/TestImg/06.jpg"></li>
     </ul>
     </div>
 </div>
 <style>
 /*焦点图*/
 .btn span{width:18px; height:18px; line-height:18px; text-align:center; font-size:12px; font-family:"Microsoft YaHei",SimHei; margin-right:5px;color:#fff;background:#30302f;}
 .btn span.on {background:#ce0609; color:#fcc;}
 </style>


JS使用方法

$('#focus').fs({
     bg:'#fff', //按钮区域的背景颜色  
     btnH:'60px',   //按钮区域的高
    btnBgbottom:'0px',  //按钮区域位置底部的高度
    btnbottom:'30px',  //按钮位置底部的高度
    textAlign:'right'  //按钮区域的水平对齐方式
});
默认: $('div,p,li,span...').fs();
同步高


JS使用方法

$.syncHigh(obj1,obj2); 
静态分页


HTML使用方法:

<div dsh="pager" tag="li">
 <ul>
 <li>从前有坐山,山有有坐庙,庙里有个插件。</li>
 ...
 </ul>
 </div>


JS使用方法

$('div').pager('分页标记',{
navId: 'nav',//分页层Id
 navClass: 'Page',//分页层Class
 navAttach: 'append',//添加分页方式
highlightClass: 'focus',//选中页样式
prevText: 'pre',//上一页文本
nextText: 'next',//下一页文本
height: null//分页层高度 
});
向下翻页滚屏


HTML使用方法:

<div dsh="downpage">
 <ul>
 <li>从前有坐山,山有有坐庙,庙里有个插件。</li>
 ...
 </ul>
 </div>


JS使用方法

$('div,p,li,span...').downpage({
 ButtonHtml:'',//设置翻页按钮内容
left:'',//按钮左定位
top:'',//按钮上定位
right:'',//按钮右定位
bottom:''//按钮下定位
});
创建随机验证码


HTML使用方法:

<div dsh="Code"></div> 

JS使用方法

$('div,p,li,span...').Code(); 
根随滚动


HTML使用方法:

<div dsh="Rscroll" top="-200" right="0">我不想呆在自己的坐位上。</div> 

JS使用方法

$('div,p,li,span...').Rscroll({top:上边距,left:左边距,right:右边距}); 
下拉菜单跳转链接


HTML使用方法:

<select dsh="jump">
     <option value="http://www.baidu.com">百度</option>
     <option value="http://www.qq.com">腾讯</option>
     <option value="http://www.taobao.com">淘宝</option>
 </select>

相关插件-对话框和灯箱,幻灯片和轮播图

讨论这个项目(6)回答他人问题或分享插件使用方法奖励jQ币

    ben5473 0
    2016/8/21 14:08:00
    美好明天 0
    2016/4/13 9:04:13
    下面的几个不兼容firefox! 回复
    programmerL 0
    2015/11/2 17:11:11

    不兼容的那几个在最后边,确实是不兼容FF浏览器

    回复
    a7272706 0
    2015/9/14 15:09:50

    方法都挺不错的,就是个别UI效果不是很美观!在UI上可以改进得更炫酷一点。

    回复
    aiti 0
    2015/1/29 16:35:37
    全都i不兼容火狐吗 ? 哪个插件不兼容呢? 回复
    Legend 0
    2015/1/4 10:42:30
取消回复