请教:js图片移动特效

2023-03-03 10:39:02JavaScript07

请教:js图片移动特效,第1张

不是很简单一两句话能说清楚地，需要HTML, CSS和javascript的配合。我大概说下做法，你需要自己写写试试看

首先把你的div设置style为overflow hidden

然后在div里面再添加一个div，假设叫做imgcontainer，在里面存放所有图片，图片以float: left方式显示，每个图片的宽度你是知道的，这样图片的个数*每个图片的宽度（必要的话再加上图片之间的间隔）设置为imgcontainer的总宽度。然后把div的宽度设置为显示3个图片的宽度。这样就可以保证只显示3个图片，多余的图片看不到。

然后在点击左右2个按钮的时候添加事件，每点击一次，让imgcontainer的marginLeft增加或减少一个图片的宽度（同样必要的时候加上图片之间的间隔距离），这样就使得图片列表在左右移动了。

下面是我的一个例子，跟你的需求可能不完全一样，大概做下参考：

HTML片段

<li><figure onclick="ViewPhoto(this,'aaaaa')"><div class="samplecontainer"><img src="./img/singularity.jpg" onload="javascript:DrawSampleImage(this)" border="0" ></div><figcaption class="imagename">aaaaa</figcaption></figure></li>

<li><figure onclick="ViewPhoto(this,'bbbbb')"><div class="samplecontainer"><img src="./img/pyre.jpg" onload="DrawSampleImage(this)" border="0" ></div><figcaption class="imagename">bbbbb</figcaption></figure></li>

</ol>

</div>

</div>

CSS部分

.photolist_container {

margin: 0

/*Firefox*/

width: -moz-calc(100% - 30px)

/*chrome safari*/

width: -webkit-calc(100% - 30px)

/*Standard */

width: calc(100% - 30px)

float: left

height: 140px

overflow: hidden

}

ol.photolist {

background-color: black

margin: 0

margin-left: 1px

padding: 0

list-style: none

height: auto

padding: 0

display: block

height: 125px

}

ol.photolist>li {

margin: 0

margin-left: -1px

padding: 4px

text-align:center

display:inline

float: left

border: 1px solid #FF6699

width: 100px

}

#photolist figure {

margin: 0

padding: 0

text-align:center

border: 1px solid #000000

cursor: pointer

}

.samplecontainer {

height: 100px

width: 100px

text-align: center

margin: 0

padding: 0

border: 0

display: table-cell

vertical-align: middle

}

.samplecontainer>img {

margin: 0

padding: 0

border: 0

vertical-align:middle

}

Javascript部分

function MovePhotoList(size) {

var photolist = document.getElementById("photolist")

var marginLeft = 1

if (photolist.style.marginLeft != "")

marginLeft = parseInt(photolist.style.marginLeft)

marginLeft = marginLeft + size

if (marginLeft <(document.getElementById("photolist_container").offsetWidth - photolist.offsetWidth))

{

marginLeft = document.getElementById("photolist_container").offsetWidth - photolist.offsetWidth

document.getElementById("nav_thumbs_next").setAttribute("class", "disabled")

}

else

{

document.getElementById("nav_thumbs_next").setAttribute("class", "enable")

}

if (marginLeft >1)

{

marginLeft = 1

document.getElementById("nav_thumbs_prev").setAttribute("class", "disabled")

}

else

{

document.getElementById("nav_thumbs_prev").setAttribute("class", "enable")

}

photolist.style.marginLeft = marginLeft + "px"

}

function NavThumbsPrev() {

var nav_thumbs_prev = document.getElementById("nav_thumbs_prev")

if (nav_thumbs_prev.getAttribute("class") != "disabled") {

MovePhotoList(56)

}

function NavThumbsNext() {

var nav_thumbs_next = document.getElementById("nav_thumbs_next")

if (nav_thumbs_next.getAttribute("class") != "disabled") {

MovePhotoList(-56)

}

ie浏览器中有自带的切换效果可供调用；

其它浏览器的话得自己写程序定位，如淡入淡出可以利用设置css的opacity属性实现；

百叶窗可以利用程序生成N个div，每个div的背景图为你要加载的图，然后设置好每个div的位置即可

HTML5 DOM 选择器

// querySelector() 返回匹配到的第一个元素var item = document.querySelector('.item')console.log(item)// querySelectorAll() 返回匹配到的所有元素，是一个nodeList集合var items = document.querySelectorAll('.item')console.log(items[0])1234567

阻止默认行为

// 原生jsdocument.getElementById('btn').addEventListener('click', function (event) {event = event || window.event；if (event.preventDefault){// w3c方法阻止默认行为

event.preventDefault()

} else{// ie 阻止默认行为

event.returnValue = false

}

}, false)// jQuery$('#btn').on('click', function (event) {event.preventDefault()

})1234567891011121314151617

阻止冒泡

// 原生jsdocument.getElementById('btn').addEventListener('click', function (event) {event = event || window.event；if (event.stopPropagation){// w3c方法阻止冒泡

event.stopPropagation()

} else{// ie 阻止冒泡

event.cancelBubble = true

}

}, false)// jQuery$('#btn').on('click', function (event) {event.stopPropagation()

})1234567891011121314151617

鼠标滚轮事件

$('#content').on("mousewheel DOMMouseScroll", function (event) {

// chrome &ie || // firefox

var delta = (event.originalEvent.wheelDelta &&(event.originalEvent.wheelDelta >0 ? 1 : -1)) || (event.originalEvent.detail &&(event.originalEvent.detail >0 ? -1 : 1))

if (delta >0) {

// 向上滚动

console.log('mousewheel top')

} else if (delta <0) {// 向下滚动

console.log('mousewheel bottom')

}

})123456789101112

检测浏览器是否支持svg

function isSupportSVG() {

var SVG_NS = 'http://www.w3.org/2000/svg' return !!document.createElementNS &&!!document.createElementNS(SVG_NS, 'svg').createSVGRect

}

// 测试console.log(isSupportSVG())1234567

检测浏览器是否支持canvas

function isSupportCanvas() {

if(document.createElement('canvas').getContext){return true

}else{return false

}

}// 测试，打开谷歌浏览器控制台查看结果console.log(isSupportCanvas())12345678910

检测是否是微信浏览器

function isWeiXinClient() {

var ua = navigator.userAgent.toLowerCase()

if (ua.match(/MicroMessenger/i)=="micromessenger") {

return true

} else {

return false

}

}// 测试alert(isWeiXinClient())1234567891011

jQuery 获取鼠标在图片上的坐标

$('#myImage').click(function(event){

//获取鼠标在图片上的坐标

console.log('X：' + event.offsetX+'\n Y:' + event.offsetY)

//获取元素相对于页面的坐标

console.log('X：'+$(this).offset().left+'\n Y:'+$(this).offset().top)

})1234567

验证码倒计时代码

<input id="send" type="button" value="发送验证码">12

// 原生js版本var times = 60, // 临时设为60秒

timer = null

document.getElementById('send').onclick = function () {

// 计时开始

timer = setInterval(function () {

times-- if (times <= 0) {

send.value = '发送验证码'

clearInterval(timer)

send.disabled = false

times = 60

} else {

send.value = times + '秒后重试'

send.disabled = true

}

}, 1000)

}1234567891011121314151617181920

// jQuery版本var times = 60,

timer = null

$('#send').on('click', function () {

var $this = $(this) // 计时开始

timer = setInterval(function () {

times-- if (times <= 0) {

$this.val('发送验证码')

clearInterval(timer)

$this.attr('disabled', false)

times = 60

} else {

$this.val(times + '秒后重试')

$this.attr('disabled', true)

}

}, 1000)

})12345678910111213141516171819202122

常用的一些正则表达式

//匹配字母、数字、中文字符

/^([A-Za-z0-9]|[\u4e00-\u9fa5])*$/

//验证邮箱

/^\w+@([0-9a-zA-Z]+[.])+[a-z]{2,4}$/

//验证手机号

/^1[3|5|8|7]\d{9}$/

//验证URL

/^http:\/\/.+\./

//验证身份证号码

/(^\d{15}$)|(^\d{17}([0-9]|X|x)$)/

//匹配中文字符的正则表达式

/[\u4e00-\u9fa5]/

//匹配双字节字符(包括汉字在内)

/[^\x00-\xff]/1234567891011121314151617181920

js时间戳、毫秒格式化

function formatDate(now) {

var y = now.getFullYear() var m = now.getMonth() + 1// 注意js里的月要加1

var d = now.getDate() var h = now.getHours()

var m = now.getMinutes()

var s = now.getSeconds() return y + "-" + m + "-" + d + " " + h + ":" + m + ":" + s

}

var nowDate = new Date(2016, 5, 13, 19, 18, 30, 20)

console.log(nowDate.getTime())// 获得当前毫秒数: 1465816710020console.log(formatDate(nowDate))123456789101112131415

js限定字符数（注意：一个汉字算2个字符）

<input id="txt" type="text">//字符串截取function getByteVal(val, max) {

var returnValue = '' var byteValLen = 0 for (var i = 0i <val.lengthi++) {if (val[i].match(/[^\x00-\xff]/ig) != null) byteValLen += 2else byteValLen += 1 if (byteValLen >max) break

returnValue += val[i]

}return returnValue

}

$('#txt').on('keyup', function () {

var val = this.value if (val.replace(/[^\x00-\xff]/g, "**").length >14) {this.value = getByteVal(val, 14)

}

})12345678910111213141516171819

js判断是否移动端及浏览器内核

var browser = {

versions: function() {

var u = navigator.userAgent

return {