Skip to content

ceilvt/Div-widget

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Div-widget

###BeforUnload.js(关闭网页提醒) 当用户关闭网页时弹出关闭提醒,F5(windows)或者ctrl+r(os x)刷新不会出现提醒;
#####用法: 引入直接可用 #####bug: 点击刷新按钮还是会出现关闭提醒
如果您有更好的意见请提交issues ,感谢!

###imgLoad.js(图片延迟加载) 图片延迟加载,依赖jquery
#####用法:

imgLoad(
	$('img'),    						//需要延迟加载的图片jquery数组对象
	'dataimg', 							//img新增attr属性名,存放要加载的图片
	'https://img.39yst.com/loading.gif' 	//默认图片路径
)

#####bug: 如果您有更好的意见请提交issues ,感谢!

###msg.js(自定义弹窗组件) 用于美化alert弹窗样式,具备url跳转,callback回调功能;
#####用法:

function test(){
	msg('测试')
}
msg('hello word') 			//hello word
msg(1024) 					//1024
msg(abc) 					//测试
msg('https://www.baidu.com') // >>www.baidu.com

#####bug: 如果您有更好的意见请提交issues ,感谢!

###slide.js(轮播图组件) 用javascript编写,不依赖任何库,样式可自定义,可以自由控制按钮显示隐藏、滚动方向、间隔时间、滚动时间; #####用法:

slide({
    box : String 								//轮播图容器ID 
    num : Number    							//轮播图的数量 
    speed : Number  							//轮播图的速度 (毫秒数)
    direction : 'top'/'bottom'/'left'/'right'  	//轮播图方向 (上下左右)
    point : Boolean  							//轮播图点选按钮 (true/false)
    lr_btn.show : Boolean  						//左右按钮显示隐藏 (true/false)
    lr_btn.hover : Boolean 						//左右按钮划过效果 (true/false)
})

#####bug: 如果您有更好的意见请提交issues ,感谢!

###hoverImg.js(图片放大镜) 用javascript编写,不依赖任何库,样式可自定义,兼容ie6、7、8; #####用法: html:

    <div class="product_img" style="position:relative;z-index:2">
        <div id="big_pic" style="display: none;">
            <img src="https://img.39yst.com/uploads/bjsp/product/28920/2015050506334483.jpg" width="800" height="800"></div>
        <ul id="pic">
            <li>
                <img src="https://img.39yst.com/uploads/bjsp/product/28920/2015050506334483.jpg" width="300" height="300"></li>
            <a href="/bjsp/bigimage/j20100019.shtml" target="_blank">
                <span id="float_layer" style="display: none; left: 141px; top: 190px;"></span>
            </a>
        </ul>
    </div>

css:

    .product_img{ width:300px; float:left;}
    #pic{ width:300px; height:300px; border:1px solid #eee;}
    #small_pic{ width:280px; overflow:hidden; height:64px;position: absolute;left: 0px;top: 0}
    #img_box {  position: relative; }
    #float_layer { width: 110px; height: 110px; border: 1px solid #000; background: #fff; filter: alpha(opacity: 30); opacity: 0.3; position: absolute; top: 0; left: 0; display:none; }
    #big_pic { position: absolute; top: -1px; left: 310px; width:300px; height:300px; overflow:hidden; border:2px solid #CCC; display:none;z-index: 10 }
    #big_pic img { position:absolute; top: -30px; left: -80px; }

js:

    hoverimg(
        bigPicId : 'big_pic',    //大图div容器ID
        picId  : 'pic',          //默认图片div容器ID
        fl : 'float_layer'      //划过显示区块ID
    )

#####bug: 如果您有更好的意见请提交issues ,感谢!

About

Div的常用插件

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%